/**
 * @class app.Login
 * @namespace app
 * @extends Ext.Panel
 */
app.Login = function(configObj) {
    var thisObject = this;
    var topBar = new Ext.Toolbar({
        dock: 'top',
        title: 'Login',
        items: [{
            text: 'Close',
            handler: function() {
					app.eventMgr.fireEvent('loginBacktoMain', null);
				}
        }]
    });

    app.Login.superclass.constructor.call(this, {
        dockedItems: [ topBar ],
        xtype: 'form',
		id: 'basicform',
		scroll: 'vertical', 
		items: [{
			style: 'margin: .1em;',
			xtype: 'fieldset',
            defaults: {
                labelWidth: '35%'
            },
            items: [{
  				xtype: 'textfield',
				style: 'margin: 1em;',
                name: 'name',
                label: 'Email',
                useClearIcon: true
            	}, 
				{
                xtype: 'passwordfield',
				style: 'margin: 1em;',
                name: 'password',
                label: 'Password',
                useClearIcon: true
            }]
         },
		 [{layout: 'vbox'},{xtype: 'button', text: 'Login', flex: 1, style: 'margin: 2em;'},
		 {xtype: 'button', text: 'OR', ui: 'plain',flex: 1, style: 'margin: 2em;'},		 
		 {xtype: 'button', text: 'Login with Facebook', flex: 1, style: 'margin: 2em;'},
		 {xtype: 'button', text: 'Quick Registration', flex: 1, style: 'margin: 2em;'}] ]
    });

    function login() {
        app.page.setActiveItem(4,{ type: 'flip', 'direction': 'right' });
    }
	
	function loginBackToMain() {
        app.page.setActiveItem(0, { type: 'flip', 'direction': 'left' });
    }
    app.eventMgr.on('Login', login);
	app.eventMgr.on('loginBackToMain', loginBackToMain);
};
Ext.extend(app.Login, Ext.Panel, {});